import React, { Component } from 'react'
import request from '../../../api/api'

export default class VideoList extends Component {
    state = {
        videolist: [],
       
    }
    getVideo = () => {
        request({
            url: '/api/maoyan/video/0',
            method: 'get'
        }).then(res => {
            res.data.feeds.forEach(element => {
                element.flag = false
            });
            this.setState({
                videolist: [...res.data.feeds]
            })
        })
    }
    play = (index) => {
        this.setState(state => {
            state.videolist[index].flag = true
            return { videolist: [...state.videolist] }
        })

    }
    componentDidMount() {
        this.getVideo()
    }
    render() {
        let { videolist } = this.state
        return (
            <>
                
                    <div className="neiR_box">
                        {
                            videolist.map((item, index) => {
                                return (
                                    <div className="shop_box" key={item.id}>
                                        {!item.flag && (<div className="tu">
                                            <img
                                                src={item.shareInfo.img}
                                                alt=""
                                            />
                                            <div className="tu_tin" onClick={() => this.play(index)}>
                                                <img src={require("../../../assets/video-btn-play.png")} alt="" />
                                            </div>
                                            <span>{item.shareInfo.title}</span>
                                        </div>)}
                                        {item.flag && (<div className="xiang_qing">
                                            <video width="100%" height="210" controls="controls" autoPlay>
                                                <source src={item.video.url} type="video/mp4" />
                                            </video>
                                        </div>)}
                                        <div className="xiXi">
                                            <div className="geR_left">
                                                <img
                                                    src={item.user.avatarurl}
                                                    alt=""
                                                /><span>{item.user.nickName}</span>
                                            </div>
                                            <div className="gneng_right">
                                                <span className="dianZai">{item.upCount}</span>
                                                <span className="pingLun">{item.commentCount}</span>
                                                <span className="fenXian"></span>
                                            </div>
                                        </div>
                                    </div>
                                )
                            })
                        }
                    </div>
                
            </>
        )
    }
}
